<template>
    <div class="bottom_info flex flex-center">
        <a
            v-if="websiteApprove.sn"
            class="mr-24px"
            :href="websiteApprove.link"
            target="_blank"
            >{{ websiteApprove.sn }}</a
        >

        <a v-if="copyright.text" :href="copyright.link" target="_blank"
            >Copyright {{ copyright.text }}</a
        >
    </div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { useAppStore } from '@/store'

const props = withDefaults(
    defineProps<{
        color: string
    }>(),
    {
        color: '#000'
    }
)

const app = useAppStore()

const websiteApprove = computed(() => {
    return {
        sn: app.websiteApproveSn,
        link: app.websiteApproveLink
    }
})

const copyright = computed(() => {
    return {
        text: app.copyRight,
        link: app.copyRightLink
    }
})
</script>
<style scoped>
.bottom_info {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 30px;
    width: 100%;
    z-index: 2;
    line-height: 30px;
    text-align: center;
    color: v-bind('props.color');
}
</style>
